<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div class="wrap">
        <div class="logo">
            <img src="images/logo.png" alt="">
        </div>
        <div class="main">
            <div class="name">
                <span>姓名：</span>
                <input id="name" type="text" autofocus value="" placeholder="请输入您的中文名或者英文名">
                <p id="errorName"></p>
            </div>
            <div class="tel">
                <span>+86</span>
                <input id="tel" type="tel" value="" placeholder="请输入您的手机号">
                <p id="errorTel"></p>
            </div>
            <div class="identify">
                <span>身份证号码：</span>
                <input id="identify" type="text" value="" placeholder="请输入您的身份证">
                <p id="errorIdentify"></p>
            </div>
            <button id="reserve">我的预约</button>
            <button id="begin">开始预约</button>
        </div>
    </div>

    <script src="封装Promise Ajax.js"></script>
    <script src="封装获取cookie.js"></script>
    <script>
        let a;
        let f;

        let begin = document.querySelector("#begin");
        let reserve = document.querySelector("#reserve");
        let name = document.querySelector("#name");
        let tel = document.querySelector("#tel");
        let identify = document.querySelector("#identify");
        let correctName, correctTel, correctIdentify;

        // 一、正则表达式
        name.addEventListener("blur", () => {
            let reg = new RegExp(/[\u4e00-\u9fa5]|[A-Za-z]/, "g");
            if (reg.test(name.value)) {
                errorName.innerText = "正确";
                errorName.style.color = "lightgreen"
                correctName = name.value;
            } else {
                errorName.innerText = "请输入正确的中文名或英文名";
                errorName.style.color = "#a32525";
            };
            if (name.value == null) {
                name.placeholder = "请输入您的中文名或者英文名";
                errorName.style.color = "#a32525";
            };
        });

        tel.addEventListener("blur", () => {
            let reg = new RegExp(/^1[3456789]\d{9}$/, "g");
            if (reg.test(tel.value)) {
                errorTel.innerText = "正确";
                errorTel.style.color = "lightgreen";
                correctTel = tel.value;
            } else {
                errorTel.innerText = "手机号格式不正确，必须是1开头的11位数字";
                errorTel.style.color = "#a32525";
            };
            if (tel.value == null) {
                tel.placeholder = "请输入您的手机号";
                errorTel.style.color = "#a32525";
            };
        });

        identify.addEventListener("blur", () => {
            let reg = new RegExp(/\d{17}[\d|x]|\d{15}/, 'g');
            if (reg.test(identify.value)) {
                errorIdentify.innerText = "正确";
                errorIdentify.style.color = "lightgreen";
                correctIdentify = identify.value;
            } else {
                errorIdentify.innerText = "请输入合法的身份证";
                errorIdentify.style.color = "#a32525";
            };
            if (identify.value == null) {
                identify.placeholder = "请输入合法的身份证";
                errorIdentify.style.color = "#a32525";
            };
        });





        // 二、点击开始预约
        begin.addEventListener("click", () => {
            if (correctName != null && correctTel != null && correctIdentify != null) {
                (async() => {
                    a = await ajax("http://newshopapi.0melon0.cn/api/f_user/register", { //开始预约接口
                        "name": name.value,
                        "phone": tel.value,
                        "card": identify.value
                    }, "POST", );

                    localStorage.setItem("token", a.result.token);
                    location.href = "./reserve.html";
                })();
            }
        });

        // 三、点击我的预约
        reserve.addEventListener("click", () => {
            if (correctName != null && correctTel != null && correctIdentify != null) {
                (async() => {
                    f = await ajax("http://newshopapi.0melon0.cn/api/f_user/report", {
                        "name": name.value,
                        "phone": tel.value,
                    }, "POST");

                    console.log(f.result);

                    f.result.forEach(item => {
                        if (item.id == localStorage.getItem("id")) {
                            localStorage.setItem("name", item.name);
                        };
                    });
                    location.href = "./my_reverse.html"
                    console.log(localStorage.getItem("name"));
                })();
            };
        });
    </script>
</body>

</html>